<template>
  <div>
    <!-- 一级菜单下面所拥有的二级菜单 -->
    <!-- <el-aside>
         <SideMenu :items='items'></SideMenu>
    </el-aside> -->
    <div class="sidebar">
      <!-- 左侧二级菜单栏的组件封装 -->
      <el-menu
        class="sidebar-el-menu"
        default-active="/test2/MyTask"
        background-color="white"
        text-color="#7a8297"
        active-text-color="#2d8cf0"
        @select="handleSelect"
        router
      >
        <template>
          <el-menu-item v-for="item in items" :index="item" :key="item">
            <!-- 需要图标的在 item 对象中加上属性 icon -->
            <!-- <i :class="item.icon"></i> -->
            <span slot="title">{{ item.title }}</span>
          </el-menu-item>
        </template>
      </el-menu>
    </div>

    <!-- 以及二级菜单所对应的页面 -->
    <el-main class="erji">
      <router-view></router-view>
    </el-main>
  </div>
</template>

<script>
import SideMenu from "../../components/sidevue/side.vue";

export default {
  components: {
    SideMenu,
  },
  data() {
    return {
      items: [
        {
          index: "/test2/myTask",
          title: "我的任务",
        },
        {
          index: "/test2/xiashutask",
          title: "下属的任务",
        },
        {
          index: "/test2/sendtask",
          title: "我发出的审批",
        },
        {
          index: "/test2/waitaudit",
          title: "待我审批(办公)",
        },
      ],
    };
  },
  methods: {
    // 根据路径绑定到对应的二级菜单，防止页面刷新重新跳回第一个
    toIndex() {
      return this.$route.path.split("/")[2];
    },

    //切换菜单栏
    handleSelect(index) {
      this.$router.push("/" + index.index);
    },
  },
};
</script>

<style scoped>
.sidebar {
  display: block;
  position: absolute;
  left: 0;
  top: 70px;
  bottom: 0;
  overflow-y: scroll;
}
.sidebar::-webkit-scrollbar {
  width: 0;
}
.sidebar-el-menu {
  width: 250px;
}
.sidebar > ul {
  height: 100%;
}
.erji {
  display: block;
  position: absolute;
  top: 60px;
  left: 240px;
}
</style>